{% extends 'adminuser/base_admin.html' %}

{% block admin_title %}用户分析{% endblock %}

{% block extra_head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{% endblock %}

{% block admin_content %}
<div class="row">
    <div class="col-md-12">
        <div class="card mb-4">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0">用户概览</h5>
                <div class="btn-group">
                    <a href="?range=week" class="btn btn-outline-primary {% if time_range == 'week' %}active{% endif %}">7天</a>
                    <a href="?range=month" class="btn btn-outline-primary {% if time_range == 'month' %}active{% endif %}">30天</a>
                    <a href="?range=year" class="btn btn-outline-primary {% if time_range == 'year' %}active{% endif %}">一年</a>
                </div>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-3">
                        <div class="card bg-primary text-white h-100">
                            <div class="card-body">
                                <h6 class="card-title text-white-50">总用户数</h6>
                                <h3 class="mb-0">{{ user_count|default:"1,284" }}</h3>
                                <p class="small mt-2 mb-0"><i class="bi bi-graph-up me-1"></i> 较上周增长 {{ user_growth|default:"7.5" }}%</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-success text-white h-100">
                            <div class="card-body">
                                <h6 class="card-title text-white-50">活跃用户数</h6>
                                <h3 class="mb-0">{{ active_users|default:"458" }}</h3>
                                <p class="small mt-2 mb-0"><i class="bi bi-graph-up me-1"></i> 较上周增长 {{ active_growth|default:"12.3" }}%</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-info text-white h-100">
                            <div class="card-body">
                                <h6 class="card-title text-white-50">新注册用户</h6>
                                <h3 class="mb-0">{{ new_users|default:"86" }}</h3>
                                <p class="small mt-2 mb-0"><i class="bi bi-graph-up me-1"></i> 较上周增长 {{ new_growth|default:"15.7" }}%</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-warning text-white h-100">
                            <div class="card-body">
                                <h6 class="card-title text-white-50">平均停留时间</h6>
                                <h3 class="mb-0">{{ avg_session_time|default:"8.5" }}分钟</h3>
                                <p class="small mt-2 mb-0"><i class="bi bi-graph-up me-1"></i> 较上周增长 {{ session_growth|default:"5.2" }}%</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-4">
                    <canvas id="userTrendChart" height="120"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0">用户活跃度分布</h5>
            </div>
            <div class="card-body">
                <div style="height: 240px">
                    <canvas id="userActivityChart"></canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0">用户地域分布</h5>
            </div>
            <div class="card-body">
                <div style="height: 240px">
                    <canvas id="userLocationChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0">用户年龄分布</h5>
            </div>
            <div class="card-body">
                <div style="height: 240px">
                    <canvas id="userAgeChart"></canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0">用户类型分布</h5>
            </div>
            <div class="card-body">
                <div style="height: 240px">
                    <canvas id="userTypeChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0">活跃用户排行</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>排名</th>
                                <th>用户名</th>
                                <th>注册时间</th>
                                <th>发布故事数</th>
                                <th>评论数</th>
                                <th>获赞数</th>
                                <th>最近活动</th>
                                <th>活跃指数</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for user in active_user_list %}
                            <tr>
                                <td>{{ forloop.counter }}</td>
                                <td>{{ user.username }}</td>
                                <td>{{ user.date_joined|date:"Y-m-d" }}</td>
                                <td>{{ user.story_count }}</td>
                                <td>{{ user.comment_count }}</td>
                                <td>{{ user.likes_received }}</td>
                                <td>{{ user.last_activity|default:"-" }}</td>
                                <td>{{ user.activity_score }}</td>
                            </tr>
                            {% empty %}
                            {% for i in "12345"|make_list %}
                            <tr>
                                <td>{{ forloop.counter }}</td>
                                <td>用户{{ forloop.counter }}</td>
                                <td>2023-0{{ forloop.counter }}-0{{ forloop.counter }}</td>
                                <td>{{ forloop.counter|add:"10" }}</td>
                                <td>{{ forloop.counter|add:"20" }}</td>
                                <td>{{ forloop.counter|add:"50" }}</td>
                                <td>2023-11-{{ forloop.counter|add:"20" }}</td>
                                <td>{{ forloop.counter|add:"85" }}</td>
                            </tr>
                            {% endfor %}
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 固定示例数据 - 用户趋势
    const dateLabels = ['6月1日', '6月8日', '6月15日', '6月22日', '6月29日', '7月6日', '7月13日'];
    const signupData = [45, 58, 72, 67, 85, 92, 78];
    
    // 用户活动类型数据
    const activityLabels = ['故事创作', '评论', '点赞', '收藏', '分享'];
    const activityData = [35, 25, 20, 15, 5];
    
    // 地域分布数据
    const locationLabels = ['北京', '上海', '广州', '深圳', '成都', '杭州', '其他'];
    const locationData = [25, 20, 15, 13, 10, 8, 9];
    
    // 年龄分布数据
    const ageLabels = ['18岁以下', '18-25岁', '26-35岁', '36-45岁', '46岁以上'];
    const ageData = [5, 35, 40, 15, 5];
    
    // 用户类型数据
    const typeLabels = ['活跃用户', '一般用户', '非活跃用户'];
    const typeData = [40, 35, 25];
    
    // 图表颜色
    const chartColors = [
        'rgba(13, 110, 253, 0.7)',  // 蓝色
        'rgba(25, 135, 84, 0.7)',   // 绿色
        'rgba(255, 193, 7, 0.7)',   // 黄色
        'rgba(220, 53, 69, 0.7)',   // 红色
        'rgba(111, 66, 193, 0.7)',  // 紫色
        'rgba(108, 117, 125, 0.7)', // 灰色
        'rgba(32, 201, 151, 0.7)'   // 青色
    ];
    
    // 用户趋势图表
    const userTrendCtx = document.getElementById('userTrendChart').getContext('2d');
    const userTrendChart = new Chart(userTrendCtx, {
        type: 'line',
        data: {
            labels: dateLabels,
            datasets: [
                {
                    label: '新注册用户',
                    backgroundColor: 'rgba(13, 110, 253, 0.2)',
                    borderColor: 'rgba(13, 110, 253, 1)',
                    borderWidth: 2,
                    data: signupData,
                    tension: 0.3,
                    fill: true
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                legend: {
                    position: 'top'
                },
                title: {
                    display: true,
                    text: '用户增长趋势'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        font: {
                            size: 11
                        }
                    }
                },
                x: {
                    ticks: {
                        font: {
                            size: 11
                        }
                    }
                }
            }
        }
    });
    
    // 用户活跃度分布图表
    const userActivityCtx = document.getElementById('userActivityChart').getContext('2d');
    const userActivityChart = new Chart(userActivityCtx, {
        type: 'pie',
        data: {
            labels: activityLabels,
            datasets: [{
                data: activityData,
                backgroundColor: chartColors,
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'right',
                    labels: {
                        font: {
                            size: 11
                        }
                    }
                },
                title: {
                    display: true,
                    text: '用户活动类型分布'
                }
            }
        }
    });
    
    // 用户地域分布图表
    const userLocationCtx = document.getElementById('userLocationChart').getContext('2d');
    const userLocationChart = new Chart(userLocationCtx, {
        type: 'bar',
        data: {
            labels: locationLabels,
            datasets: [{
                label: '用户数量',
                data: locationData,
                backgroundColor: chartColors,
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                },
                title: {
                    display: true,
                    text: '用户地域分布'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        font: {
                            size: 11
                        }
                    }
                },
                x: {
                    ticks: {
                        font: {
                            size: 11
                        }
                    }
                }
            }
        }
    });
    
    // 用户年龄分布图表
    const userAgeCtx = document.getElementById('userAgeChart').getContext('2d');
    const userAgeChart = new Chart(userAgeCtx, {
        type: 'doughnut',
        data: {
            labels: ageLabels,
            datasets: [{
                data: ageData,
                backgroundColor: chartColors,
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'right',
                    labels: {
                        font: {
                            size: 11
                        }
                    }
                },
                title: {
                    display: true,
                    text: '用户年龄分布'
                }
            }
        }
    });
    
    // 用户类型分布图表
    const userTypeCtx = document.getElementById('userTypeChart').getContext('2d');
    const userTypeChart = new Chart(userTypeCtx, {
        type: 'polarArea',
        data: {
            labels: typeLabels,
            datasets: [{
                data: typeData,
                backgroundColor: chartColors.slice(0, 3),
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'right',
                    labels: {
                        font: {
                            size: 11
                        }
                    }
                },
                title: {
                    display: true,
                    text: '用户类型分布'
                }
            }
        }
    });
});
</script>
{% endblock %} 